<template>
  <el-tabs v-model="state.tab" class="tab-container" type="border-card">
    <el-tab-pane v-if="props.type == 'FlinkSQL'" label="信息" name="info">
      <info-box :run-info="props.runInfo" :task-params="props.taskParams"/>
    </el-tab-pane>
    <el-tab-pane v-if="props.type == 'FlinkSQL'" label="结果" name="result">
      <result-box :run-info="props.runInfo" :task-params="props.taskParams"/>
    </el-tab-pane>
    <el-tab-pane label="进程" name="process">
      <process-box :taskId="props.taskId"/>
    </el-tab-pane>
    <el-tab-pane label="历史" name="History">
      <history-box/>
    </el-tab-pane>
    <el-tab-pane label="会话模式" name="conversation">
      <conversation :task-params="props.taskParams" @changeTaskParams="changeTaskParams"/>
    </el-tab-pane>
    <el-tab-pane v-if="props.type == 'FlinkSQL'" label="函数" name="func">
      <fun-box/>
    </el-tab-pane>
    <el-tab-pane v-if="type == 'FlinkSQL'" label="快捷键" name="quickCode">
      <quick-box/>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { watch, reactive, ref, toRefs, onActivated, defineEmits } from "vue";
import historyBox from './history.vue'
import processBox from './process.vue'
import infoBox from './info.vue'
import resultBox from './result.vue'
import funBox from './functM.vue'
import conversation from './conversation.vue'
import quickBox from './quick.vue'

const emit = defineEmits(["changeTaskParams", "getCode"]);


const props = defineProps({
  taskParams: { default: () => ({}), type: Object },
  taskData: { default: () => ({}), type: Object },
  runInfo: { default: () => ({}), type: Object },
  type: { default: '', type: String },
  taskId: { type: String },
})

const state = reactive({
  tab: props.type === 'FlinkSQL' ? 'info' : 'process'
})

const changeTaskParams = (v:any) => {
  console.log(v)
  emit('changeTaskParams', v)
};
const getCode = (code:any) => {
  emit('getCode', code)
};
</script>

<style lang="less">
.tab-container {
  width: 100%;
  height: 100%;
  .el-tabs__header{
    width: 100%;
    height: 39px;
  }
  .el-tabs__content{
    width: 100%;
    height: calc(100% - 39px);
    overflow: auto;
  }
}
</style>
